<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #createCode {
            user-select: none;
        }

        .right {
            color: green;
            font-size: 12px;
        }

        .error {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <!-- -->
    <div class="box">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </div>
</body>
<script>
    // 1.  验证 用户名 密码 手机号 邮箱   => 失焦时验证
    // 用户名 => 整体
    //          拆开写     1. 6-12位  2. 以非数字开头   3. 由数字 字母 下划线 $组成
    // 2.  用户名 密码 手机号 邮箱  => 全都成功 => 点击注册 才能提交(alert("可以注册"))

    var userInp = document.getElementsByClassName("user")[0];
    var userSpan = document.getElementsByClassName("user_span")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwd_span")[0];

    var phoneInp = document.getElementsByClassName("phone")[0];
    var phoneSpan = document.getElementsByClassName("phone_span")[0];

    var emailInp = document.getElementsByClassName("email")[0];
    var emailSpan = document.getElementsByClassName("email_span")[0];

    var btn = document.getElementsByClassName("btn")[0];



    userInp.onblur = function () {
        var user = userInp.value.trim();

        // 用户名 字节长度验证  => 英文 -> 1   中文 => 2 
        // console.log(user.length);  // "哈哈123"
        // var count = 0;
        // var chReg = /[\u4e00-\u9fa5]/
        // for(var char of user){ // 获取用户名中的每一个字符
        //     console.log(char);
        //     if(chReg.test(char)){ // 验证单个字符是否是中文
        //         count += 2;
        //     }else{
        //         count ++;
        //     }
        // }
        // console.log(count);

        console.log(user.length);  // "哈哈123"

        var chReg = /[\u4e00-\u9fa5]/g;
        var arr = user.match(chReg); 
        // console.log(arr);
        var count = user.length;
        if(arr){
            count += arr.length;
        }

        console.log(count);

        // 中中中中中中



        var startReg = /^[^0-9]/; // 非数字开头
        var illegal = /[^\w$\u4e00-\u9fa5]/  // 是否含有非法字符

        //  count >12
        if (count> 12) {  // 长度不符合规则  !lenReg.test(user) ==true  =>  lenReg.test(user)==false
            userSpan.textContent = "用户名不能超过6个汉字或12个字符";
            userSpan.className = "user_span error";
        } else if (!startReg.test(user)) { // 开头不符合规则
            userSpan.textContent = "用户名不能以数字开头";
            userSpan.className = "user_span error";
        } else if (illegal.test(user)) {  // 含有非法字符
            userSpan.textContent = "用户名仅支持中英文、数字、下划线和$";
            userSpan.className = "user_span error";
        } else {
            userSpan.textContent = "√";
            userSpan.className = "user_span right";
        }

    }

 
</script>

</html>